Web SDK provides official connectors via the @0xsequence/connect-connectors package. However, you can also integrate custom connectors with Web SDK to support additional wallets. This guide will walk you through creating and using custom connectors.

​
Creating a Custom Connector

To create a custom connector, you can use an existing connector as a basis. For example, the Metamask Connector is a good starting point. Here’s an example of how to create a custom connector: 
export const myCustomConnector = (options: MyCustomConnectorOptions) => ({
  id: 'my-custom-connector',
  name: 'My Custom Connector',
  logoDark: MyCustomLogoDark,
  logoLight: MyCustomLogoLight,
  createConnector: () => {
    const connector = myCustomConnector(options);
    return connector;
  },
});
Make sure to provide a unique id for your connector to avoid conflicts with other connectors. You can also customize fields such as name, logoDark, and logoLight to control how the connector appears in Web SDK. The createConnector function from wagmi should return an initialized connector. Web SDK connectors are wrappers of Wagmi connectors, so you can use an official Wagmi connector if available, or create your own if needed. For more details on creating custom connectors, refer to Wagmi’s guide on Custom Connectors.

​
Using Custom Connectors

When using custom connectors, you can’t rely on the getDefaultConnectors utility function. Instead, you need to pass custom configurations to Web SDK. First, create a list of connectors, including your custom connector, and provide it to the Wagmi configuration: 
import { getConnectWallets } from '@0xsequence/connect';
import { createConfig } from 'wagmi';

const projectAccessKey = '<your-project-access-key>';

const connectors = getConnectWallets(projectAccessKey, [
  google({
    defaultNetwork: 137,
    connect: {
      app: 'my-app',
      projectAccessKey: '<access-key>'
    }
  }),
  // ... other connectors
  myCustomConnector({ appName: 'my-app' }),
]);

const config = createConfig({
  transports,
  connectors,
  chains
})
Next, use your custom connector by specifying its id in either the socialAuthOptions or walletAuthOptions field of the Web SDK configuration: 
const kitConfig = {
  signIn: {
    socialAuthOptions: ['google', 'facebook'],
    walletAuthOptions: ['metamask', 'my-custom-connector'],
  }
};

return (
  <WagmiProvider config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <SequenceConnect config={connectConfig}>
        <App />
      </SequenceConnect>
    </QueryClientProvider>
  </WagmiProvider>
);

​
Share Your Custom Connectors

Feel free to contribute your custom connectors by creating a pull request. This way, others can benefit from your work and enjoy seamless integration with Sequence Web SDK’s. Share the love ❤️ by expanding the ecosystem of custom connectors!